<!--
 * @Author: hu_binbin
 * @Date: 2021-08-05 09:23:18
 * @LastEditTime: 2021-08-06 16:54:19
 * @Description: 
-->
<template>
    <div class="header" :style="headerStyle">
      <!-- 返回箭头 -->
      <div class="header_arrow" @click="getBack">
        <slot name="header_arrow">
          <img :src="imgSrc" alt="" slot="header_arrow" />
        </slot>
      </div>
      <!-- 中间标题问题 -->
      <div class="header_title">
        <slot name="header_title">
          <span :style="titleStyle" class="font17">{{ title }}</span>
        </slot>
      </div>
      <!-- 文字与图标 -->
      <div class="header_icon">
        <slot name="header_icon">
          <span :style="textStyle">{{ text }}</span>
        </slot>
      </div>
    </div>
  </template>
   
  <script>
  export default {
    name:"header",
    props: {
      title: {
        type: String,
        default: ""
      },
      imgSrc: {
        type: String,
        default: ""
      },
      text: {
        type: String,
        default: ""
      },
       // 头部样式
       headerStyle: {
        type: Object,
        default: function() {
          return { color: "#333",background: "#fff"}
        }
      },
      // 标题样式
      textStyle: {
        type: Object,
        default: function() {
          return {color: "#333"}
        }
      },
      titleStyle: {
        type: Object,
        default: function() {
          return {color: "#333"}
        }
      }
    },
    methods: {
      // 返回上一页
      getBack() {
        this.$router.back(-1);
      },
    },
  };
  </script>
  <style scoped>
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header .header_title {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-left: -5%;
    margin-right: -20%;
  }
  .header_arrow {
    width: 5%;
  }
  .header_arrow img {
    vertical-align: middle;
  }
  .header_icon {
    width: 20%;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .font17 {
    font-size: 1.1rem;
  }
  </style>